<template>
    <div class="main-container">
        <div class="main-body">
            <!-- 地图展示 -->
            <div class="row row-01" style="min-height: 800px;margin-bottom: 200px;">
                <div class="container">
                    <div class="map" v-if="isMap">
                        <el-row>
                            <el-col :span="12">
                                <div class="pic">
                                    <div class="pic_relvate">
                                        <div class="mark">
                                            <svg-icon class="sfqx" name="mark" width="32px" height="32px"
                                                color="white"></svg-icon>
                                            <svg-icon class="slgy" name="mark" width="32px" height="32px"
                                                color="white"></svg-icon>
                                            <svg-icon class="cyzy" name="mark" width="32px" height="32px"
                                                color="white"></svg-icon>
                                            <svg-icon class="gs" name="mark" width="32px" height="32px"
                                                color="white"></svg-icon>
                                            <svg-icon class="jss" name="mark" width="32px" height="32px"
                                                color="white"></svg-icon>
                                            <svg-icon class="zhl" name="mark" width="32px" height="32px"
                                                color="white"></svg-icon>
                                        </div>
                                        <img src="@/assets/map/fuzhou.jpg">
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="items">
                                    <div class="dot">
                                        <!-- icon -->
                                        <div class="item-icon">
                                            <svg-icon name="company" width="48px" height="48px"
                                                color="currentColor"></svg-icon>
                                        </div>
                                        <!-- h3 -->
                                        <div class="item-title">
                                            <h3>合作景区</h3>
                                        </div>
                                        <!-- p标签 -->
                                        <div class="item-num">
                                            <p>
                                                <count-to :startVal="0" :endVal="8848" :duration="1000"
                                                    v-if="cooperate"></count-to>
                                            </p>
                                        </div>

                                    </div>
                                    <div class="dot">
                                        <div class="item-icon">
                                            <svg-icon name="city2" width="48px" height="48px"
                                                color="currentColor"></svg-icon>
                                        </div>
                                        <!-- h3 -->
                                        <div class="item-title">
                                            <h3>占领城市</h3>
                                        </div>
                                        <!-- p标签 -->
                                        <div class="item-num">
                                            <p>
                                                <count-to :startVal="0" :endVal="1" :duration="1000" v-if="city"></count-to>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="dot">
                                        <div class="item-icon">
                                            <svg-icon name="team" width="48px" height="48px"
                                                color="currentColor"></svg-icon>
                                        </div>
                                        <!-- h3 -->
                                        <div class="item-title">
                                            <h3>团伙成员</h3>
                                        </div>
                                        <!-- p标签 -->
                                        <div class="item-num">
                                            <p>
                                                <count-to :startVal="0" :endVal="6" :duration="1000" v-if="team"></count-to>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="dot">
                                        <div class="item-icon">
                                            <svg-icon name="trophy" width="48px" height="48px"
                                                color="currentColor"></svg-icon>
                                        </div>
                                        <!-- h3 -->
                                        <div class="item-title">
                                            <h3>获得奖项</h3>
                                        </div>
                                        <!-- p标签 -->
                                        <div class="item-num">
                                            <p>
                                                <count-to :startVal="0" :endVal="0" :duration="1000"
                                                    v-if="trophy"></count-to>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <!-- 客服帮助 -->
            <div class="row row-03 row-mini costomer">
                <transition name="el-fade-in-linear">
                    <div class="container row-relative" v-if="isCustomer">
                        <img src="@/assets/source/customer_2.png">
                        <div class="costomer-help">
                            <el-row>
                                <el-col :span="12">
                                    <div class="help-01">
                                        <h1>
                                            在线客服一对一脚把脚指导，30天内也不会退款，更没有售后
                                        </h1>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="help-02">
                                        <p>
                                            只要购买了我们的软件，保证教你到会，不会也不会退款的。就是这样，对了，前端门户的钱记得结一下，打我微信里
                                        </p>
                                        <div>
                                            <button>联系我们</button>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </transition>
            </div>

            <!-- 新闻数据 -->
            <div class="row row-01">
                <div class="container">
                    <div class="news">
                        <div class="title">
                            <span>最新消息</span>
                            <h1>快速查看文旅项目资讯</h1>
                        </div>
                        <!-- 设置flex格式，然后爱咋搞咋搞 -->
                        <!-- 循环 -->
                        <div class="items" v-if="isNews">
                            <div class="item-news" v-for="item in newsList">
                                <div class="pic">
                                    <img :src="item.img">
                                </div>
                                <div class="item-detail">
                                    <div class="item-time">
                                        <!-- 时间使用绿色 h5 -->
                                        <p>{{ item.date }}</p>
                                    </div>
                                    <div class="item-title">
                                        <!-- 标题使用h2 加粗黑体 -->
                                        <h2>{{ item.title }}</h2>
                                    </div>
                                    <div class="item-btn">
                                        <!-- 按钮要求有动画效果，，鼠标移入时触发 -->
                                        <button data-text="Go To Page"
                                            class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up">
                                            <div class="btn-borders">
                                                <div class="border-top"></div>
                                                <div class="border-right"></div>
                                                <div class="border-bottom"></div>
                                                <div class="border-left"></div>
                                            </div>
                                            <span class="btn-text">Read More+</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 联系我们 -->
            <div class="row row-02">
                <div class="container">
                    <el-row>
                        <el-col :span="12">
                            <div class="contact">
                                <div class="title">
                                    <!-- h5 -->
                                    <h5>Far far away, behind the word mountains</h5>
                                    <!-- h1 -->
                                    <h1>掌上文旅，让旅游不再单调</h1>
                                    <!-- p -->
                                    <p>
                                        我们为所有景区提供高效快捷的解决方案和服务。
                                        我们支持客户迈向更可持续的未来——无论在以负担得起的系统为社会提供活力的道路上走多远。
                                    </p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="contact">
                                <div class="form">
                                    <!-- 表单需要有背景阴影 -->
                                    <!-- 表单需要有名字，电话，邮箱，服务类型 -->
                                    <div class="quote-form">
                                        <!-- 标题 -->
                                        <div class="quote-form-title">
                                            <h1>
                                                随时联络
                                            </h1>
                                            <p>
                                                如果您需要任何帮助，请给我们发邮件，但是我不会留邮箱的(╹ڡ╹ )
                                            </p>
                                        </div>
                                        <div class="quote-form-body">
                                            <el-form :model="formLabelAlign" style="max-width: 460px" size="large">
                                                <el-form-item>
                                                    <el-input v-model="formLabelAlign.name" placeholder="您的名字" />
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-input v-model="formLabelAlign.phone" placeholder="您的电话" />
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-input v-model="formLabelAlign.email" placeholder="您的邮箱" />
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-select v-model="formLabelAlign.sevice" class="m-2"
                                                        placeholder="请选择服务类型">
                                                        <el-option v-for="item in options" :key="item.value"
                                                            :label="item.label" :value="item.value" />
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item>
                                                    <button class="click-on">
                                                        提交申请
                                                    </button>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!-- 更多问题 -->
            <div class="row row-01">
                <div class="container">
                    <div class="other-question">
                        <div class="title">
                            <h3>
                                <span>你是否还有</span>
                            </h3>
                            <h1> 更多的问题？</h1>
                        </div>
                        <div class="item">
                            <el-collapse v-model="aboutActive" accordion>
                                <el-collapse-item title="何时开始部署？" name="1">
                                    <div class="item-div">
                                        按正常工作日的8-10日后开始部署安装，如果还没有看到有人上面推荐去找张逸涛！
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="这项目是干啥的" name="2">
                                    <div class="item-div">
                                        别问，问就是我也不知道。
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="What my website protected from hackers?" name="3">
                                    <div class="item-div">
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                                        praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
                                        excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
                                        officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                                        rerum facilis est et expedita distinctio.
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="How do I backup my website?" name="4">
                                    <div class="item-div">
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                                        praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
                                        excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
                                        officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                                        rerum facilis est et expedita distinctio.
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 返回顶部 -->
        <transition name="el-fade-in-linear">
            <div v-if="!isCartoon" class="back-up" @click="backUp">
                <svg-icon name="arrowback" width="48px" height="48px" color="white"></svg-icon>
            </div>
        </transition>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';

// 引入数字增长动画效果
import { CountTo } from 'vue3-count-to';


// 声明值
const isCartoon = ref(true);
// 当前滑动条位子
let scrollTop = ref(0);
// 定时器
let goto: any = ref(null);

// 地图动画
let isMap = ref(false);

// 客服栏动画
let isCustomer = ref(false);

// 合作
let cooperate = ref(false);
// 城市
let city = ref(false);
// 成员
let team = ref(false);
// 奖项
let trophy = ref(false);

// 新闻资讯
let isNews = ref(false);


// 监听页面滚动事件
document.addEventListener('scroll', () => {
    scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(scrollTop.value);
    // 判断是否大于50
    if (scrollTop.value > 50)// 假如 > 50 显示回到顶部按钮
    {
        isCartoon.value = false;
    } else // 假如 < 50 隐藏回到顶部按钮
    {
        isCartoon.value = true;
    }
    // 100 触发地图进入效果
    if (scrollTop.value >= 100 && !isMap.value) {
        isMap.value = true;
        setTimeout(() => {
            cooperate.value = true
        }, 200)
        setTimeout(() => {
            city.value = true
        }, 400)
        setTimeout(() => {
            team.value = true
        }, 600)
        setTimeout(() => {
            trophy.value = true
        }, 800)

    }


    // 600 触发客服进入效果动画,只触发一次，可以通过判断是否为boolean类型进行判断
    if (scrollTop.value >= 600 && !isCustomer.value) {
        isCustomer.value = true;
    }
    // 1160 显示新闻资讯进入效果
    if (scrollTop.value >= 1160 && !isNews.value) {
        isNews.value = true;
    }
}, true)


// 回到顶部
function backUp() {
    goto = setInterval(() => {
        document.documentElement.scrollTop -= 15;
        if (document.documentElement.scrollTop <= 15) {
            clearInterval(goto);
        }
    }, 1)
}


// 新闻啥的
const newsList = reactive([
    {
        img: '/src/assets/list/01.jpg',
        title: '这个比上台领奖了',
        date: '11,November,2023'
    },
    {
        img: '/src/assets/list/02.jpg',
        title: '这个比上台演讲了',
        date: '11,November,2023'
    },
    {
        img: '/src/assets/list/03.jpg',
        title: 'HarmonyOS福州线下发布会',
        date: '23,December,2023'
    },
    {
        img: '/src/assets/list/04.jpg',
        title: '不知道小余啥时候偷拍的',
        date: '17,September,2023'
    },
])


// 表单
const formLabelAlign = reactive({
    name: '',
    phone: '',
    email: '',
    sevice: ''
})
const options = [
    {
        value: '仅该软件服务',
        label: '仅该软件服务'
    },
    {
        value: '软件服务和安装部署业务',
        label: '软件服务和安装部署业务'
    },
    {
        value: '我只要源码',
        label: '我只要源码'
    }
]
// 更多问题 
const aboutActive = ref('0');


// 彩蛋 ~
init();
function init(): any {
    console.log('===========================2024-01-31==========================')
    console.log('***************************************************************')
    console.log('██╗       ██╗        ██╗   ██╗ ██╗   ██╗   █████╗    ███╗   ██╗')
    console.log('██║       ╔═║        ╚██╗ ██╔╝ ██║   ██║   ██╔═██╗   ████╗  ██║')
    console.log('██║       ██║         ╚███╔╝   ██║   ██║  ███████║   ██╔██╗ ██║')
    console.log('██║       ██║         ██╔██╗   ██║   ██║  ██╔═══██║  ██║╚██╗██║')
    console.log('███████╗  ██║        ██╔╝  ██╗ ╚██████╔╝ ██║     ██║ ██║   ╚██║')
    console.log('╚══════╝  ╚═╝        ╚═╝   ╚═╝  ╚═════╝  ╚═╝     ╚═╝ ╚═╝    ╚═╝')
    console.log('***************************************************************')
    console.log('=================================================By-JF2307=====')
};
</script>

<style scoped lang="scss">
p {
    text-indent: 2em;
    line-height: 40px;
    font-size: 18px;
}

:deep(.el-scrollbar) {
    height: auto !important;
}

.container {
    min-width: none;
}

.main-body {
    min-width: var(--max-width);
    margin: auto;
    margin-top: 100px;
    height: auto;
    overflow-x: hidden;
}

.main-body .row {
    min-height: 600px;

    * {
        height: auto;
    }
}

.main-body .row-01 {
    background: var(--white);
}

.main-body .row-02 {
    background: linear-gradient(120deg, rgba(5, 89, 96, 0.95) 0%, rgba(5, 89, 96, 0.95) 100%), url("@/assets/background/index_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.main-body .row-max {
    height: 800px;
}

.main-body .row-mini {
    min-height: 400px !important;
}

.main-body .row-03 {
    background: rgb(37, 55, 69);
}


/* 地图 */
.map {
    .pic {
        .pic_relvate {
            float: right;
            margin-right: 1rem;
            width: 550px;
            height: 700px;
            position: relative;

            svg {
                position: absolute;
                opacity: 0;
            }

            .mark {
                svg {
                    animation: sideUp_mark .3s forwards;

                    @for $i from 1 through 6 {
                        &:nth-child(#{$i}) {
                            animation-delay: $i * 0.1s;
                        }
                    }
                }
            }

            // 三坊七巷
            .sfqx {
                top: 225px;
                left: 199px;
            }

            // 森林公园
            .slgy {
                top: 65px;
                left: 187px;
            }

            // 传一
            .cyzy {
                top: 297px;
                left: 107px;
            }

            // 鼓山
            .gs {
                top: 349px;
                left: 418px;
            }

            // 金山寺
            .jss {
                top: 257px;
                left: 37px;
            }

            // 镇海楼
            .zhl {
                top: 172px;
                left: 204px;
            }

            // 地图
            img {
                border: 2px solid var(--text-light);
                border-radius: 5px;
                height: 700px;
            }
        }
    }

    .items {
        .dot {
            border: 2px solid var(--text-light);
            display: flex;
            padding: 2rem;
            margin: 12px;
            width: 80%;
            align-items: center;
            justify-content: flex-start;
            background: var(--primary-color);
            color: white;
            opacity: 0;

            transition: all 0.1s ease;
            // 添加动画，从右到左
            animation: sideRight .2s forwards;

            .item-icon {
                margin-right: 2rem;
            }

            .item-title {
                h3 {
                    font-size: 40px;
                    font-weight: 700;
                    font-family: 'Barlow Condensed';
                    // color: var(--white);
                    -webkit-transition: all 0.3s ease;
                    // transition: all 0.3s ease;
                    // margin-bottom: 30px;
                }
            }

            .item-num {
                p {
                    font-size: 40px;
                    font-weight: 600;
                    // color: var(--white);
                    font-family: 'Heebo';
                    -webkit-transition: all 0.3s ease;
                }
            }

            // 鼠标移入效果
            &:hover {
                background: var(--white);
                color: var(--primary-color) !important;
            }

            // 添加动画延迟进入时间
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    animation-delay: $i * 0.2s;
                }
            }

        }
    }
}


/* 客服栏 */
.main-body .row .row-relative {
    position: relative;
}

/* js监听移动到此的时候触发到动画，添加CSS样式然后出现 */
.row-relative img {
    /* height: 100% !important; */
    width: 350px;
    transform: translateX(75%);
    position: absolute;
    top: -11.8rem;
    /* left: 20rem; */
    z-index: 1;
    /* opacity: 0; */
    animation: sideLeft-Customer 0.5s;
}

.costomer-help {
    width: 50%;
    float: right;
    transform: translateX(-5%);
    height: 370px !important;
    /* background: red; */
    animation: sideRight-Customer 0.5s;
}

.costomer-help .help-01 {
    margin-top: 80px;
    padding: 1rem;
}

.costomer-help .help-01 h1 {
    color: var(--white);
    line-height: 48px;
}

.costomer-help .help-02 {
    margin-top: 100px;
    padding: 1rem;
}

.costomer-help .help-02 p {
    color: var(--white);
    font-size: 16px;
    line-height: 26px;
    min-height: 160px;
}

.costomer-help .help-02 button {
    border: 0;
    padding: 6px 24px;
    font-size: 14px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border-radius: 3px;
}

/* 最新动态 */
.news {
    max-width: var(--min-width);
    margin: 50px auto;

    .title {
        // 居中黑色
        margin-bottom: 100px;
        text-align: center;

        span {
            position: relative;
            font-size: 19px;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 35px;
            background: linear-gradient(120deg, var(--secondary-color) 0%, rgba(5, 89, 96, 0.95) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        h1 {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0px;
        }
    }

    .items {
        // 设置弹性布局格式，一排2个
        display: flex;
        justify-content: space-between;
        // margin-bottom: -40px;
        flex-direction: row;
        flex-wrap: wrap;

        .item-news {
            opacity: 0;
            width: 48%;
            display: grid;
            grid-template-columns: 1.5fr 2fr;
            gap: 2rem;
            margin-bottom: 40px;
            animation: sideUp .2s forwards;

            // &:nth-child(1) {
            //     animation-delay: 0s;
            // }

            // &:nth-child(2) {
            //     animation-delay: 0.5s;
            // }

            // &:nth-child(3) {
            //     animation-delay: 1s;
            // }

            // &:nth-child(4) {
            //     animation-delay: 2s;
            // }

            // sass写法，做循环进行添加 
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    animation-delay: $i * 0.1s;
                }
            }

            .pic {
                width: 260px;
                height: 177px;

                img {
                    border-radius: 3px;
                    height: 100%;
                    width: 100%;
                    /* 设置图片的高度 */
                    object-fit: cover;
                }
            }

            .item-detail {
                // width: 40%;
                padding: 3px;

                .item-time {
                    p {
                        line-height: normal;
                        margin-bottom: 3px;
                        color: var(--secondary-color);
                        text-indent: 0;
                        font-size: 16px;
                        // font-weight: 700;
                    }
                }

                .item-title {
                    margin: 10px 0 20px 0;

                    h2 {
                        min-height: 64px;
                        font-size: 24px;
                    }
                }

                .item-btn {
                    margin: 12px 0 0 0;

                    // button {
                    //     border: 2px solid rgba($color: #94a3b8, $alpha: 0.2);
                    //     padding: 13px 28px;
                    //     font-size: 12px;
                    //     background: none;
                    //     cursor: pointer;
                    // }
                    // 不想自己写，偷的
                    .btn {
                        --hue: 144;
                        --ease-in-duration: 0.25s;
                        --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
                        --ease-out-duration: 0.65s;
                        --ease-out-delay: var(--ease-in-duration);
                        --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
                        position: relative;
                        padding: 13px 28px;
                        font-size: 12px;
                        line-height: 1.5;
                        color: white;
                        text-decoration: none;
                        background-color: hsl(var(--hue), 59%, 35%);
                        border: 1px solid hsl(var(--hue), 59%, 35%);
                        outline: transparent;
                        overflow: hidden;
                        cursor: pointer;
                        user-select: none;
                        white-space: nowrap;
                        transition: 0.25s;

                        &:hover {
                            background: hsl(var(--hue), 100%, 31%);
                        }

                        &-primary {
                            --hue: 171;
                        }

                        &-ghost {
                            color: hsl(var(--hue), 59%, 35%);
                            background-color: transparent;
                            border-color: hsl(var(--hue), 59%, 35%);

                            &:hover {
                                color: white;
                            }
                        }

                        &-border-stroke {
                            border-color: hsla(var(--hue), 59%, 35%, 0.35);

                            .btn-borders {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;

                                .border-top {
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                    height: 1px;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleX(0);
                                    transform-origin: left;
                                }

                                .border-right {
                                    position: absolute;
                                    right: 0;
                                    width: 1px;
                                    height: 100%;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleY(0);
                                    transform-origin: bottom;
                                }

                                .border-bottom {
                                    position: absolute;
                                    bottom: 0;
                                    width: 100%;
                                    height: 1px;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleX(0);
                                    transform-origin: left;
                                }

                                .border-left {
                                    position: absolute;
                                    left: 0;
                                    width: 1px;
                                    height: 100%;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleY(0);
                                    transform-origin: bottom;
                                }

                                // when unhover, ease-out left, bottom; ease-in right, top

                                .border-left {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }

                                .border-bottom {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }

                                .border-right {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }

                                .border-top {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }
                            }

                            &:hover {
                                color: hsl(var(--hue), 59%, 35%);
                                background: transparent;

                                .border-top,
                                .border-bottom {
                                    transform: scaleX(1);
                                }

                                .border-left,
                                .border-right {
                                    transform: scaleY(1);
                                }

                                // when hover, ease-in left, bottom; ease-out right, top

                                .border-left {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }

                                .border-bottom {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }

                                .border-right {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }

                                .border-top {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }
                            }
                        }

                        &-text-float-up {
                            &::after {
                                position: absolute;
                                content: attr(data-text);
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                opacity: 0;
                                transform: translateY(35%);
                                transition: 0.25s ease-out;
                            }

                            // when hover, ease-in top-text; ease-out bottom-text

                            .btn-text {
                                display: block;
                                transition: 0.75s 0.1s var(--ease-out-exponential);
                            }

                            &:hover {
                                // when hover, ease-in bottom-text; ease-out top-text

                                .btn-text {
                                    opacity: 0;
                                    transform: translateY(-25%);
                                    transition: 0.25s ease-out;
                                }

                                &::after {
                                    opacity: 1;
                                    transform: translateY(0);
                                    transition: 0.75s 0.1s var(--ease-out-exponential);
                                }
                            }
                        }
                    }


                }
            }
        }
    }
}

/* 联系我们 */
.contact {
    padding: 3rem;

    /* 联系我们-左侧 */
    .title {
        width: 80%;
        // margin: auto;
        margin-left: auto;

        h5 {
            margin: 16px 0;
            color: var(--white);
            font-size: 20px;
        }

        h1 {
            font-size: 42px;
            margin: 24px 0;
            color: var(--white);
        }

        p {
            margin-top: 24px;
            color: var(--white);
        }
    }

    /* 联系我们-右侧 */
    .form {
        width: 75%;
        // margin: auto;
        margin-right: auto;
        background: var(--white);
        border-radius: 15px;
        box-sizing: border-box;
        padding: 2rem;
        box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);

        p {
            line-height: 33px;
            font-size: 12px;
            margin: 5px 0;
        }

        .el-form {
            gap: 12px;

            .click-on {
                width: 100%;
                height: 2.5rem;
                border-radius: 3px;
                border: 0;
                background: var(--secondary-color);
                color: var(--white);
            }
        }

    }

}


/* 问题栏 */
.other-question {
    max-width: 80%;
    margin: auto;
    padding-top: 1.5rem;

    .title {
        text-align: center;
        margin-bottom: 50px;

        h3 {

            // margin: 6px 0;
            /* 文字渐变色 */
            span {
                background: linear-gradient(120deg, var(--secondary-color) 0%, rgba(5, 89, 96, 0.95) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        h1 {
            font-size: 3rem;
            text-indent: 1em;
            margin: 12px 0;
        }

    }

    .item {
        padding: 2rem 4rem;
        margin: 0 2rem;

        .el-collapse {
            .el-collapse-item {
                :deep(.el-collapse-item__header) {
                    font-size: 18px;
                    padding: 30px 0;
                }

            }
        }

        .item-div {
            font-size: 16px;
            color: var(--text-light);
            text-indent: 2em;
        }
    }

}


/* 回到顶部 */
.back-up {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 120px;
    border-radius: 10px 0 0 0;
    text-align: center;
    line-height: 150px;
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    background: var(--secondary-color);
    z-index: 100;
    transition: 0.2s linear;
}

.back-up:after {
    cursor: pointer;
    position: absolute;
    content: "";
    top: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 10px 0 0 0;
    z-index: -1;
    background: rgb(37, 55, 69);
    transition: 0.2s linear;
}

.back-up:hover:after {
    top: 0;
    bottom: 0;
}



/* 动画效果 */
/* 向左进入 */
@keyframes sideLeft-Customer {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    100% {
        /* 跳转X轴75%位置，0为最左边 */
        transform: translateX(75%);
        opacity: 1;
    }
}

/* 向右进入 */
@keyframes sideRight-Customer {
    0% {
        transform: translateX(60px);
        opacity: 0;
    }

    100% {
        transform: translateX(-5%);
        opacity: 1;
    }
}

@keyframes sideButtom {
    0% {
        transform: translateY(-60px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 向右进入 */
@keyframes sideRight {
    0% {
        transform: translateX(60px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* 向上进入 */
@keyframes sideUp {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* 地图上标记点显示动画效果 */
@keyframes sideUp_mark {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

    60% {
        transform: translateY(-20px);
        opacity: 0.6;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
</style>